<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {_resetPassword} from "@/api/user";
import {ElMessage} from "element-plus";
import { useUserInfoStore } from '@/stores/userInfo';

const router = useRouter()
const userInfoStore = useUserInfoStore();

const form = ref({
  id: null,
  password: '',
  newPassword: '',
  confirmPassword: ''
})

const submit = () => {
  _resetPassword(form.value).then(res => {
    if (res.data.code !== 200) {
      ElMessage({
        message: res.data.message,
        type: 'error',
      })
    } else {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      // 清除用户登录状态
      userInfoStore.removeUserInfo();
      // 清空表单
      form.value.password = ''
      form.value.newPassword = ''
      form.value.confirmPassword = ''
      // 跳转到登录页面
      router.push({path: '/login'})
    }
  })
}
</script>

<template>
  <el-card>
    <h1>修改密码</h1>
    <el-form  :model="form" label-width="80px">
      <el-form-item label="旧密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入旧密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="form.confirmPassword" placeholder="请输入确认密码" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-card>
</template>

<style scoped lang="scss">

</style>